import { Graphics, Sprite, Container, Loader } from "pixi.js"

import { control } from './keyboard-control'
import { drag } from './drag'
import { wheel } from './wheel'
import { mapDrag } from './map-drag'
let robot;

/**
 * @Description 初始化精灵，线路
 * @date 2021-09-03
 * @param {any} app
 * @returns {any}
 */
export const setup = (gl, app, props, emit) => {

  const { position, line, afterLine, openKeyBoard, isDrag, isDragFrame, isFrameZoome } = props

  // create line 创建总线路
  const graphics = new Graphics()

  graphics.lineStyle(5, 0xff0000, 1);
  graphics.moveTo(10, 10);

  for (let index = 0; index < line.length; index++) {
    const element = line[index];
    graphics.lineTo(element[0], element[1])

  }

  app.addChild(graphics);

  // 已经过线路
  const realPath = new Graphics()
  realPath.lineStyle(5, 0xffff00, 1);
  realPath.moveTo(10, 10);

  for (let index = 0; index < afterLine.length; index++) {
    const element = afterLine[index];
    realPath.lineTo(element[0], element[1]);
  }

  app.addChild(realPath);

  // 创建精灵
  robot = Sprite.from('/src/assets/robot_.png');

  // 设置精灵位置，减去精灵的宽高
  robot.x = position[0] - 7;
  robot.y = position[1] - 7;


  // 将精灵的锚定点居中。
  robot.anchor.set(0.5);

  // vx 和 vy去控制精灵的运动速度，0 表示精灵静止
  robot.vx = 0;
  robot.vy = 0;

  // 精灵点击事件
  robot.interactive = true; // 开启精灵交互
  robot.buttonMode = true; // 鼠标变手型

  // robot.on("pointerdown", (event) => {
  //   console.log(event, "graphics")
  // })

  app.addChild(robot);

  if (openKeyBoard) {
    control(gl, app, robot, emit)
  }

  if (isDrag) {
    drag(gl, app, robot, emit)
  }

  if (isDragFrame) {
    mapDrag(gl, app, robot)
  }

  if (isFrameZoome) {
    wheel(gl, app, robot)
  }

}


